.bar-height {
	width: 100%;
	height: var(--status-bar-height);
}

page {
	background: $background;
}

view {
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
}
text{
	word-wrap: break-word;
	word-break: break-all;
}
image {
	display: block;
	width: 100%;
}
.skeleton-screen {
	background-color: $background;
	background: linear-gradient(100deg,
			rgba(255, 255, 255, 0) 40%,
			rgba(255, 255, 255, .5) 50%,
			rgba(255, 255, 255, 0) 60%) $background;
	background-size: 200% 100%;
	background-position-x: 180%;
	animation: 1s skeletonScreenKey ease-in-out infinite;
}

@keyframes skeletonScreenKey {
	to {
		background-position-x: -20%;
	}
}
// 全局从下弹窗到上 Global bottom-to-top pop-up
.global-bottom-to-top-pop-up {
	width: 100%;
	// #ifndef H5
	height: 100vh;
	// #endif
	// #ifdef H5
	height:calc(100vh - var(--window-bottom));
	// #endif
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 888;
	display: flex;
	flex-flow: column;

	._top {
		flex: 1;
	}

	@keyframes fadeIn {
		0% {
			position: absolute;
			left: 0;
			bottom: -900rpx;
		}

		100% {
			position: absolute;
			left: 0;
			bottom: 0;
		}
	}

	._bottom {
		width: 100%;
		background: #FFF;
		border-radius: 20rpx 20rpx 0 0;
		position: absolute;
		left: 0;
		bottom: -900rpx;
		animation: fadeIn .8s forwards;

		._title {
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid $border;
			line-height: 32rpx;
			padding: 25rpx;

			._title-text {
				font-size: 32rpx;
				font-weight: bold;
			}

			view {
				margin-left: auto;
			}
		}
	}
}
.global-navbar {
	width: 100%;
	height: 80rpx;
	position: fixed;
	top: var(--window-top);
	left: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1rpx solid $border;
	.global-navbar-for{
		width: 20%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.global-navbar-for-text{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;
			.global-navbar-for-text-name{
				font-size: 32rpx;
				line-height: 32rpx;
				position: relative;
				z-index: 2;
			}
			.global-navbar-for-text-hover{
				height: 15rpx;
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 1;
			}
		}
	}
	.global-navbar-for-hover{
		.global-navbar-for-text{
			.global-navbar-for-text-name{
				font-weight: bold;
			}
		}
	}
}
.global-navbar-placeholder{
	width: 100%;
	height: 81rpx;
}